<div class='content-list span6'>
  <h3>{{i18n 'admin.customize.colors.long_title'}}</h3>
  <ul>
    {{#each scheme in model}}
      {{#unless scheme.is_base}}
        <li><a {{action "selectColorScheme" scheme}} {{bind-attr class="scheme.selected:active"}}>{{scheme.description}}</a></li>
      {{/unless}}
    {{/each}}
  </ul>
  <button {{action "newColorScheme"}} class='btn'><i class="fa fa-plus"></i>{{i18n 'admin.customize.new'}}</button>
</div>

{{#if selectedItem}}
  <div class="current-style color-scheme">
    <div class="admin-container">
      <h1>{{text-field class="style-name" value=selectedItem.name}}</h1>

      <div class="controls">
        <button {{action "save"}} {{bind-attr disabled="selectedItem.disableSave"}} class='btn'>{{i18n 'admin.customize.save'}}</button>
        <button {{action "toggleEnabled"}} {{bind-attr disabled="selectedItem.disableEnable"}} class="btn">
          {{#if selectedItem.enabled}}
            {{i18n 'disable'}}
          {{else}}
            {{i18n 'enable'}}
          {{/if}}
        </button>
        <button {{action "copy" selectedItem}} class='btn'><i class="fa fa-copy"></i> {{i18n 'admin.customize.copy'}}</button>
        <button {{action "destroy"}} class='btn btn-danger'><i class="fa fa-trash-o"></i> {{i18n 'admin.customize.delete'}}</button>
        <span {{bind-attr class=":saving selectedItem.savingStatus::hidden" }}>{{selectedItem.savingStatus}}</span>
      </div>

      <br/>

      <div class='admin-controls'>
        <div class='search controls'>
          <label>
            {{input type="checkbox" checked=onlyOverridden}}
            {{i18n 'admin.site_settings.show_overriden'}}
          </label>
        </div>
      </div>

      {{#if colors.length}}
      <table class="table colors">
        <thead>
          <tr>
            <th></th>
            <th class="hex">{{i18n 'admin.customize.color'}}</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {{#each c in colors}}
            <tr {{bind-attr class="c.changed c.valid:valid:invalid"}}>
              <td class="name" {{bind-attr title="c.name"}}>
                <b>{{c.translatedName}}</b>
                <br/>
                <span class="description">{{c.description}}</span>
              </td>
              <td class="hex">{{color-input hexValue=c.hex brightnessValue=c.brightness valid=c.valid}}</td>
              <td class="actions">
                <button {{bind-attr class=":btn :revert c.savedIsOverriden::invisible"}} {{action "revert" c}} title="{{i18n 'admin.customize.colors.revert_title'}}">{{i18n 'revert'}}</button>
                <button {{bind-attr class=":btn :undo c.changed::invisible"}} {{action "undo" c}} title="{{i18n 'admin.customize.colors.undo_title'}}">{{i18n 'undo'}}</button>
              </td>
            </tr>
          {{/each}}
        </tbody>
      </table>
      {{else}}
        <p>{{i18n 'search.no_results'}}</p>
      {{/if}}
    </div>
  </div>
{{else}}
  <p class="about">{{i18n 'admin.customize.colors.about'}}</p>
{{/if}}

<div class="clearfix"></div>
